<template>
  <view class="qrcode">
    <view class="image">
      <view class="code">
        <uqrcode :size="220" ref="uQRCode" :text="uQRCode" />
      </view>
    </view>
    <view class="tips">
      <text>温馨提示</text>
      <text>1.此邀请码为您的专属邀请码</text>
      <text>2.邀请好友注册成功，您将获得100元现金券</text>
    </view>

    <u-popup
      :show="show"
      mode="center"
      @close="show = false"
      bgColor="transparent"
    >
      <view class="popup">
        <image :src="qrcode" mode=""></image>
        <text>长按二维码保存</text>
      </view>
    </u-popup>

    <view class="btn" @click="submit"> 保存图片 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      uQRCode: "https://api.hainanjiumi.com/h5/",
      show: false,
      qrcode: "",
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      this.$http.post("api/user/userInfo").then((res) => {
        let { id } = res;
        this.uQRCode = `${this.uQRCode}?pid=${id}`;
      });
    },
    submit() {
      // #ifdef H5
      this.$refs.uQRCode.toTempFilePath({
        success: (res) => {
          let { tempFilePath } = res;
          this.qrcode = tempFilePath;
          this.show = true;
        },
      });
      // #endif
      // #ifdef APP-PLUS
      this.$refs.uQRCode.save({
        success: (res) => {
          uni.showToast({
            title: "保存成功",
          });
        },
      });
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.qrcode {
  height: 100vh;
  background: url("../static/image/bgs.png") no-repeat;
  background-size: 100% 1400rpx;
  overflow: hidden;
  .popup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    align-items: center;
    image {
      width: 400rpx;
      height: 400rpx;
      padding: 20rpx;
      background-color: white;
    }
    text {
      padding: 20rpx 0;
    }
  }
  .image {
    margin: 0 auto 32rpx;
    padding-top: 220rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .code {
      padding: 20rpx;
      background-color: white;
    }
  }

  .tips {
    padding: 0 60rpx;
    color: #797979;
    font-size: 28rpx;
    line-height: 200rpx;
    display: flex;
    flex-direction: column;
    margin-top: 220rpx;
    text {
      font-size: 24rpx;
      line-height: 33rpx;
      margin-top: 9rpx;
    }
  }

  .btn {
    height: 90rpx;
    margin: 66rpx 30rpx;
    background: url("../static/image/btn.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36rpx;
  }
}
</style>
